<template>
	<div class="nav_item_container flex_column">
		<img :src="item.picUrl" alt="nav_item">
		<div class="title">{{ item.mainTitle }}</div>
		<div class="text">{{ item.viceTitle }}</div>
	</div>
</template>

<script lang="ts">
export default {
    name: "Item"
}
</script>

<script setup lang="ts">
// region >>> 相关依赖

// endregion

// region >>> 相关数据
import {NavModel} from "@/api/WorthBuyApi";

const props = defineProps<{
    item: NavModel
}>()
// endregion

// region >>> 生命周期函数
// endregion

// region >>> 事件回调
// endregion

// region >>> 自定义功能函数
// endregion
</script>

<style lang="less" scoped>

.flex {
  display: flex;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

// swiper 插槽 item
.nav_item_container {
  width: 84px;
  height: 100.5px;
  position: relative;
  align-items: center;

  img {
    width: 60px;
    height: 60px;
  }

  .title {
    height: 20px;
    font-size: 14px;
    color: #333;
  }

  .text {
    height: 15px;
    font-size: 12px;
    margin-top: 1px;
    color: #999;
  }
}
</style>